<template>
  <div>
    <!-- cell -->
    <van-cell :border="false" title="我的频道">
      <van-button plain type="danger" round size="mini"  @click="isEdit = !isEdit"  class="editBtn">{{isEdit ? "完成" : "编辑"}}</van-button>
    </van-cell>
    <!-- 我的频道按钮 -->
    <van-grid class="my-grid" :gutter="10">
      <van-grid-item
        :class="tabActive === index ? 'active' : ''"
        @click="myChannelClick(index, channels.id)"
        v-for="(channels, index) in channelsEdit"
        :key="channels.id"
        :text="channels.name">
        <van-icon v-show="isEdit && index !== 0" name="close" slot="icon"/>
      </van-grid-item>
    </van-grid>
     <van-cell :border="false" title="频道列表">
    </van-cell>
    <!-- 频道列表按钮 -->
    <van-grid :gutter="10" class="recommend-grid">
      <van-grid-item @click="addChannel(channel)" v-for="channel in channelsList" :key="channel.id" :text="channel.name" icon="plus"/>
    </van-grid>
  </div>
</template>

<script>
import { getChannels, addMyChannels, delChannels } from '@/api/channel.js'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage.js'
export default {
  data () {
    return {
      channelsAll: [],
      // 编辑按钮flag
      isEdit: false
    }
  },
  created () {
    this.getChannels()
  },
  computed: {
    ...mapState(['userTouken']),
    // 获取频道列表 filter 返回数组 条件为true 追加, false 忽略     find 条件满足 返回true 不满足返回undefined
    channelsList () {
      return this.channelsAll.filter(channel => {
        return !this.channelsEdit.find(myChannel => myChannel.id === channel.id)
      })
    }
  },
  methods: {
    // 获取全部频道列表
    async getChannels () {
      try {
        const { data: res } = await getChannels()
        this.channelsAll = res.data.channels
      } catch (err) {
        this.$slots('获取列表失败')
      }
    },
    // 点击添加频道
    async addChannel (channel) {
      // 因为计算属性在设置数据的时候会触发 重新得到推荐列表,所以点击添加后推荐列表会相应减少
      this.channelsEdit.push(channel)
      if (this.userTouken) {
        try {
          const { data: res } = await addMyChannels({
            id: channel.id,
            seq: this.channelsEdit.length
          })
          if (res.message !== 'OK') return
          this.$toast('添加成功')
        } catch (e) {
          this.$toast('添加失败')
        }
      } else {
        setItem('myChannel', this.channelsEdit)
      }
    },
    // 点击编辑按钮
    myChannelClick (index, id) {
      if (this.isEdit) {
        // 编辑状态
        if (index === 0) return
        if (index < this.tabActive) {
          this.$emit('sendIndex', this.tabActive - 1, true)
        }
        this.channelsEdit.splice(index, 1)
        this.delChannels(id)
      } else {
        // 未编辑状态
        this.$emit('sendIndex', index, false)
      }
    },
    // 删除频道
    async delChannels (id) {
      if (this.userTouken) {
        await delChannels(id)
        this.$toast('删除成功')
      } else {
        setItem('myChannel', this.channelsEdit)
      }
    }
  },
  props: {
    channelsEdit: {
      type: Array,
      required: true
    },
    tabActive: {
      type: Number,
      required: true
    }
  }
}
</script>

<style scoped lang="less">
.van-cell {
  margin-top: 15px;
}
.editBtn {
  width: 104px;
}
/deep/.van-grid-item {
  .van-grid-item__content--center {
    height: 86px;
    background-color: #f3f5f5 !important;
    border-radius: 6px;
  }
  .van-grid-item__content--surround::after {
    border: 0 !important;
  }
}

/deep/.recommend-grid {
  .van-grid-item__content{
    display:flex;
    flex-direction: row;
  }
  .van-icon {
    font-size: 25px;
  }
  .van-grid-item__text {
    margin: 0 0 0 8px;
  }
}

/deep/.my-grid {
  .van-grid-item__text {
    margin-top: 0;
  }
  .van-grid-item__icon-wrapper {
    position: unset;
  }
  .van-icon {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 0.46667rem;
  }
  .active {
    .van-grid-item__text {
      font-size: 28px;
      font-weight: 700;
      color: #f00 !important;
    }
  }
}
</style>
